<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<c:set var="user" value="${sessionScope.user}"/>
<!DOCTYPE html>
<head>
  <title>我的订单</title>
  <link rel="stylesheet" href="${path}/pet/shoppingcart/css/orders.css">
  <script src="${path}/pet/home/js/jquery.min.js"></script>
  <script src="${path}/pet/user/js/bootstrap.min.js"></script>
  <link type="text/css" rel="stylesheet" href="${path}/pet/shoppingcart/css/style.css" />
</head>

<body>
    <div class="tab-active" id="complete_orders_all"></div>
    <div class="tab-active" id="pending_orders_all"></div>
    <div class="tab-active" id="cancel_orders_all"></div>
    <!-- 支付 -->
    <div>
      <div class="hide_box"></div>
      <div class="shang_box">
        <a id="shang_close" class="shang_close" href="javascript:void(0)" title="关闭">
          <img src="${path}/pet/shoppingcart/images/img/close.jpg" alt="取消" />
        </a>
        <div class="shang_tit">
          <p>请选择支付方式</p>
        </div>
        <div class="shang_payimg">
          <img src="${path}/pet/shoppingcart/images/img/alipayimg.jpg" title="扫一扫" />
        </div>
        <div class="pay_explain"><button id="pay_complete">我已支付</button></div>
        <div class="shang_payselect">
          <div class="pay_item checked" data-id="alipay">
            <span class="radiobox"></span>
            <span class="pay_logo"><img src="${path}/pet/shoppingcart/images/img/alipay.jpg" alt="支付宝" /></span>
          </div>
          <div class="pay_item" data-id="weipay">
            <span class="radiobox"></span>
            <span class="pay_logo"><img src="${path}/pet/shoppingcart/images/img/wechat.jpg" alt="微信" /></span>
          </div>
        </div>
        <div class="shang_info">
          <p>打开<span id="shang_pay_txt">支付宝</span>扫一扫</p>
        </div>
      </div>
    </div>
</body>

<script>
  function dashangToggle() {
    $(".hide_box").fadeToggle();
    $(".shang_box").fadeToggle();
  }
  $(function(){
    var user="<%=session.getAttribute("user")%>";
    var uid = ${user.id};
    var billID = "";

    //根据用户ID获取已完成的订单
    var qData = {
      uid:uid,
      billState:"订单已支付",
      billType:"商品结算"
    };
    $.ajax({
      type: 'POST',
      url: '/bill/searchByUser',
      data:qData,
      dataType : "json",
      error: function () {
        console.log("失败");
      },
      success: function (result) {
        var str = "";
        for(var key in result) {
          for (i = 0; i < result[key].length; i++) {
            str += '<p class="tab_p">';
            str += '  <span style="float: left;font-size: 0.8rem;">'+ result[key][i].createDate +'</span>';
            str += '  <span style="float: right;font-size: 0.8rem;color:#3D608F">'+ result[key][i].state +'</span>';
            str += '</p>';
            str += '<div class="line"></div>';
            str += '<div class="product-item">';
            str += '  <img class="img_style" src="${path}/backstage/images/'+result[key][i].item.picUrl+'">';
            str += '</div>';
            str += '<div class="text" style="position: absolute;margin-top: 2%;">'+ result[key][i].item.itemName +'</div>';
            str += '<div class="data1">';
            str += '  <p>受保人:'+ result[key][i].insured.name +'</p>';
            str += '  <h4 style="width: 150px;float: right;display: block;">'+ result[key][i].price +'</h4>';
            str += '</div>';
            str += '<div class="aui-mail-button">';
            str += '  <a href="${path}/productDetail?id='+ result[key][i].item.id +'">再次购买</a>';
            str += '  <a href="${path}/buySuccess?billID='+ result[key][i].id +'">订单详情</a>';
            str += '</div>';
            str += '<div class="line"></div>';
          }
        }
        $('#complete_orders_all').html(str);
      }
    });



    //弹出支付框
    $(".pay_item").click(function() {
      $(this).addClass('checked').siblings('.pay_item').removeClass('checked');
      var dataid = $(this).attr('data-id');
      $(".shang_payimg img").attr("src", "${path}/pet/shoppingcart/images/img/" + dataid + "img.jpg");
      $("#shang_pay_txt").text(dataid == "alipay" ? "支付宝" : "微信");
    });

    $(".shang_close").click(function() {
      dashangToggle();
    });



    //根据用户ID获取未支付的订单
    var cData = {
      uid:uid,
      billState:"订单未支付",
      billType:"商品结算"
    };
    $.ajax({
      type: 'POST',
      url: '/bill/searchByUser',
      data: cData,
      dataType: "json",
      error: function () {
        console.log("失败");
      },
      success: function (result) {
        var str = "";
        for (var key in result) {
          for (i = 0; i < result[key].length; i++){
            billID = result[key][i].id;
            str += '<p class="tab_p">';
            str += '  <span style="float: left;font-size: 0.8rem;">' + result[key][i].createDate + '</span>';
            str += '  <span style="float: right;font-size: 0.8rem;color:#F03726">' + result[key][i].state + '</span>';
            str += '</p>';
            str += '<div class="line"></div>';
            str += '<div class="product-item">';
            str += '  <img class="img_style" src="${path}/backstage/images/'+result[key][i].item.picUrl+'">';
            str += '</div>';
            str += '<div class="text" style="position: absolute;margin-top: 2%;">' + result[key][i].item.itemName + '</div>';
            str += '<div class="data1">';
            str += '  <p>受保人:' + result[key][i].insured.name + '</p>';
            str += '  <h4 style="width: 150px;float: right;display: block;">' + result[key][i].price + '</h4>';
            str += '</div>';
            str += '<div class="aui-mail-button">';
//            str += '  <a id="pay_complete1" style="color: #FFFFFF;">立即付款</a>';
            str += '  <a href="javascript:void(0)" onClick="dashangToggle()" id="pay_complete1" style="color: #FFFFFF;">立即付款</a>';
            str += '  <a id="'+ result[key][i].id +'" class="aui-df-color">取消订单</a>';
            str += '</div>';
            str += '<div class="line"></div>';
          }
        }
        $('#pending_orders_all').html(str);
        $("#pay_complete").click(function() {
          $.ajax({
            type: 'POST',
            url: 'bill/pay',
            dataType: "json",
            data: {billId:billID,uid:uid},
            error: function () {
              console.log("失败");
            },
            success: function (data) {
              alert("支付成功");
              window.location.href = '${path}/buySuccess?billID='+ billID +'';
            }
          });
        });
        //支付
//        $("#pay_complete1").click(function() {
//          dashangToggle();
//        });

        //取消订单
        $("#pending_orders_all .aui-df-color").click(function() {
          billId = $(this).attr('id');   //获设置选中的宠物
          console.log(billId);
          var cdata ={
            billId:billId
          };
          if(confirm('确定要取消订单吗?')) {
            $('#test').empty();
            $.ajax({
              type: 'POST',
              url: '/bill/delete',
              dataType: "json",
              data: cdata,
              error: function () {
                console.log("失败");
              },
              success: function (result) {
                alert("已取消订单，点击回到全部订单");
                window.location.reload();
              }
            });
            return true;
          }
          return false;
        });
      }
    });

    //根据用户ID获取已取消的订单
    var dData = {
      uid:uid,
      billState:"订单已删除",
      billType:"商品结算"
    };
    $.ajax({
      type: 'POST',
      url: '/bill/searchByUser',
      data:dData,
      dataType : "json",
      error: function () {
        console.log("失败");
      },
      success: function (result) {
        var str = "";
        for(var key in result) {
          for (i = 0; i < result[key].length; i++) {
            str += '<p class="tab_p">';
            str += '  <span style="float: left;font-size: 0.8rem;">'+ result[key][i].createDate +'</span>';
            str += '  <span style="float: right;font-size: 0.8rem;color: #3EAF0E">'+ result[key][i].state +'</span>';
            str += '</p>';
            str += '<div class="line"></div>';
            str += '<div class="product-item">';
            str += '  <img class="img_style" src="${path}/backstage/images/'+result[key][i].item.picUrl+'">';
            str += '</div>';
            str += '<div class="text" style="position: absolute;margin-top: 2%;">'+ result[key][i].item.itemName +'</div>';
            str += '<div class="data1">';
            str += '  <p>受保人:'+ result[key][i].insured.name +'</p>';
            str += '  <h4 style="width: 150px;float: right;display: block;">'+ result[key][i].price +'</h4>';
            str += '</div>';
            str += '<div class="aui-mail-button">';
            str += '  <a href="${path}/productDetail?id='+ result[key][i].item.id +'">再次购买</a>';
            str += '</div>';
            str += '<div class="line"></div>';
          }
        }
        $('#cancel_orders_all').html(str);
      }
    });

  });
</script>

<style>
  .tab_p {
    height: 25px;
    /*border: 2px solid red;*/
    padding: 0 20px;
    margin-top: 10px;
  }
  .product-item {
    margin-right: .8em;
    width: 100px;
    height: 80px;
    line-height: 70px;
    text-align: center;
    /*margin-top: 1%;*/
    display: inline-block;
    margin-top: 10px;
  }
  .line {
    background: #efefef;
    width: 100%;
    height: 2px;
  }
  .img_style {
    width: 100%;
    max-height: 100%;
    vertical-align: top;
    margin-left: 10px;
  }
  .text {
    display: inline-block;
  }
  .data1 {
    width: 200px;
    float: right;
    display: inline;
    text-align: right;
    margin-top: 10px;
    margin-right: 20px;
  }
</style>
</html>
